<!-- 定义模版对象 -->
<template>
  <div id="all_box">

    <el-header height="120px">
      <el-row>
        <el-col :span="3" :offset="3" class="home_page">
          <a href="dina"><i class="el-icon-house"> 主页</i></a>
        </el-col>

        <el-col :span="6" :offset="4" class="search_input">
          <el-input type="text" v-model="query" placeholder="搜索书籍. . ." prefix-icon="el-icon-arrow-right"
            @keyup.enter.native="gosearch" clearable>
          </el-input>
        </el-col>

        <el-col :span="2" :offset="3" class="user_col">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              <i class="el-icon-user"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>

        <!-- <el-button icon="el-icon-user" round>登录</el-button> -->

      </el-row>
    </el-header>

    <el-container>
      <el-aside id="el_aside_left" width="250px">
        <!-- <div class="leftCollapse">
            <el-button type="text">全部</el-button>
          </div> -->
        <!-- <div class="leftCollapse" v-for="menu in menuList">
                <el-button type="text">{{menu.name}}</el-button>
              </div> -->
        <el-row>
          <el-col :span="12" :offset="5">
            <el-menu unique-opened router collapse-transition background-color="transparent" text-color="black"
              active-text-color="#475164">
              <el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id">
                <template slot="title">
                  <i class="el-icon-right"></i>
                  <span>{{menu.name}}</span>
                </template>
                <el-submenu :index="childrenMenu.id+''" v-for="childrenMenu in menu.children" :key="childrenMenu.id">
                  <template slot="title">
                    <span>{{childrenMenu.name}}</span>
                  </template>
                  <el-menu-item :index="grandsonMenu.id+''" v-for="grandsonMenu in childrenMenu.children"
                    :key="grandsonMenu.id">
                    <template slot="title">
                      <span>{{grandsonMenu.name}}</span>
                    </template>
                  </el-menu-item>
                </el-submenu>
              </el-submenu>
            </el-menu>

          </el-col>
        </el-row>
      </el-aside>

      <el-main>

        <router-view></router-view>

      </el-main>
      <el-aside id="el_aside_right" width="200px">
      </el-aside>
    </el-container>
  </div>
</template>

<!-- 定义JS变量 -->
<script scoped>
  export default {
    name: 'index_page',
    created() {
      this.getMenuList()
    },
    data() {
      return {
        
        query: '',
        isCollapse: true,
        menuList: []
      }
    },
    methods: {
      gosearch() {
        // alert("yes")

        // this.$root.URL = this.query
        // console.log(this.$root.URL + "index.vue")
        // let {data:res} = this.$http.get('/book/searchall',this.queryInfo)
        // if(res.status !== 200) return this.$message.error("查询出错")
        // this.$message.success("查询成功")
        // await this.$router.push({
        //   name: 'searched',
        //   params: {
        //     query1: this.queryInfo.query
        //   }
        // })

        this.$store.commit('refreshQuery',this.query)
        this.query = this.$store.getters.getQuery
        console.log(this.query+"_indexPage")

      },
      async getMenuList() {
        const {
          data: res
        } = await this.$http.get('/book/getmenulist')
        if (res.status !== 200) return this.$message.error('书籍菜单查询失败')
        this.menuList = res.data
        console.log(this.menuList)
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
  html,
  body,
  #app,
  .el-container {
    /*设置内部填充为0，几个布局元素之间没有间距*/
    padding: 0px;
    /*外部间距也是如此设置*/
    margin: 0px;
    /*统一设置高度为100%*/
    height: 100%;
    // position: relative;
    background: #3494E6;
    background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
    background: linear-gradient(to right, #EC6EAD, #3494E6);
  }

  #all_box {
    position: relative;
    background: #3494E6;
    background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
    background: linear-gradient(to right, #EC6EAD, #3494E6);
    height: 100%;
    width: 100%;
    background-size: cover;
    margin-top: 0px;

    .el-header {

      // background-color: brown;
      // line-height: 200px;
      .el-row {
        position: relative;
        top: 30px;

        .home_page {
          // position: relative;
          // left: 10%;
        }

        .search_input {
          // border-radius: 20px;
          // position: relative;
          // left: 34%;
          // width: 400px;
          // height: 20px;
        }

        // .el-button {
        //   position: relative;
        //   left: 60%;
        //   // top: 20%;
        // }

        .user_col {

          // left: 80%;
          .el-dropdown-link {
            cursor: pointer;
            color: #070001;
            font-size: 25px;
          }

          .el-icon-arrow-down {
            font-size: 12px;
          }
        }


      }
    }

    #el_aside_left {

      // background-color: red;
      .el-row {
        position: relative;
        top: 80px;

        .el-menu {
          //设置居中
          text-align: left;
          //设定字符间距
          letter-spacing: 4px;
          border-right-color: white;
          min-width: 160px;

          .el-submenu {
            // text-align: center;
            background: transparent;
            min-width: 160px;

            .el-menu-item {
              // text-align: right;
              min-width: 160px;
            }
          }

        }
      }
    }

    .el-main {
      // background-color: gray;

    }

    #el_aside_right {}

  }
</style>
